---
title: Ripple Button
description: A button that animates on tap with a ripple effect.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-buttons-ripple" />

## Installation

<ComponentInstallation name="components-buttons-ripple" />

## Usage

```tsx
<RippleButton>
  Ripple Button
  <RippleButtonRipples />
</RippleButton>
```

## API Reference

### RippleButton

<ExternalLink
  href="https://animate-ui.com/docs/primitives/buttons/ripple#ripplebutton"
  text="Animate UI API Reference - Ripple Button Primitive"
/>

<TypeTable
  type={{
    variant: {
      description: 'The variant of the button.',
      type: '"default" | "accent" | "destructive" | "outline" | "secondary" | "ghost" | "link"',
      required: false,
      default: 'default',
    },
    size: {
      description: 'The size of the button.',
      type: '"default" | "sm" | "lg" | "icon"',
      required: false,
      default: 'default',
    },
    hoverScale: {
      description: 'The scale of the button on hover.',
      type: 'number',
      required: false,
      default: 1.05,
    },
    tapScale: {
      description: 'The scale of the button on tap.',
      type: 'number',
      required: false,
      default: 0.95,
    },
    '...props': {
      description: 'The props for the button.',
      type: 'HTMLMotionProps<"button">',
      required: false,
    },
  }}
/>

### RippleButtonRipples

<TypeTable
  type={{
    color: {
      description: 'The color of the ripple.',
      type: 'string',
      required: false,
      default: 'var(--ripple-button-ripple-color)',
    },
    scale: {
      description: 'The scale of the ripple.',
      type: 'number',
      required: false,
      default: 10,
    },
    transition: {
      description: 'The transition of the ripple.',
      type: 'Transition',
      required: false,
      default: "{ duration: 0.6, ease: 'easeOut' }",
    },
    '...props': {
      description: 'The props for the ripple.',
      type: 'HTMLMotionProps<"span">',
      required: false,
    },
  }}
/>

#### CSS Variables

<TypeTable
  type={{
    '--ripple-button-ripple-color': {
      description: 'The color of the ripple.',
      type: 'color',
      required: false,
    },
  }}
/>

## Credits

- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/button) for style inspiration.
